<template>

 

    
    <div class="sgp-main-view-shell">
        <div class="sgp-main-view">
        <div class="sgp-main-title">
            <div class="sgp-main-titletext">
                {{viewName}}

            </div>
            <div class="sgp-action-bar" v-if="slots.header!=undefined">
            <slot name="header">
            </slot>
        </div>
        </div>
        <!-- 操作栏插槽 -->
   

        <!-- 主内容插槽 -->
        <div class="viewInfo" >
            <slot></slot>
        </div>


    </div>

    </div>

    


</template>

<script setup lang="ts">
import { onMounted, useSlots } from 'vue'
import { useStore } from 'vuex';

// 获取插槽信息
const slots = useSlots()

/**
 * 
 * viewName 模块名称
 */
const props = defineProps({
    viewName: { type: String, default: "" }
})


onMounted(()=>{
    const store = useStore()
    store.commit('SET_MAINVIEWLOADING', false)
})



</script>

<style scoped lang="scss">


.sgp-action-bar {
    text-align: end;
    // margin-bottom: 5px;
    border-top: 1px solid rgb(35, 35, 35,0.1);
}

.viewInfo {
    background-color: white;
    // margin-top: 20px;
    flex: 1;
    // border: 1px solid var(--el-border-color);
    border-radius: 2px;
    padding: 10px;
    height: calc(100% - 28px);
 
}

.sgp-main-view {
    display: flex;
    flex-direction: column;
    // padding: 20px;
    text-align: left;
    // background-color: rgb(247, 247, 247);
    overflow: hidden;
    height: calc(100% - 30px);
    width: calc(100% - 30px);
    border-radius: 12px;
    min-height: 350px;
    min-width: 1216px;
    margin:26px 15px 15px 15px;
    background: white;

    // box-shadow: 0 0 17px 0 rgb(0 0 0 / 7%);
}

.sgp-main-view-shell {
height: calc(100% - 100px);
width: calc(100% - 20px);

margin: 10px;
//   background: #ffffff;; 
   border-radius: 20px;

  overflow: hidden;
//   display: flex;
}

.sgp-main-title {
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    float: left;
    // width: 350px;
    width: 93%;
    height: 28px;
    // font-size: 23px;
    // font-family: PingFang SC-Heavy,PingFang SC;
    // font-weight: 800;
    // color: #353535;
    line-height: 23px;
    -webkit-background-clip: text;
    display: flex;
justify-content: space-between
}
.sgp-main-titletext {
font-size: 23px;
    font-family: PingFang SC-Heavy,PingFang SC;
    font-weight: 800;
    color: #353535;
    line-height: 23px;
}
.sgp-main-view ::v-deep{
    .el-overlay-dialog .el-dialog{
        border-radius: 10px;
    }
}


</style>